<template>
  <div class="login-container">
    <el-form class="loginForm" :model="loginRuleForm" :rules="loginRules" ref="loginForm" >
      <h1>后台管理系统</h1>
      <el-form-item prop="username">
        <el-input v-model="loginRuleForm.username" type="text" placeholder="请输入账号"></el-input>
      </el-form-item>
      <el-form-item prop="password">
        <el-input v-model="loginRuleForm.password" type="password" placeholder="请输入密码"></el-input>
      </el-form-item>
      <el-form-item prop="isAgree">
        <el-checkbox v-model="loginRuleForm.isAgree">我已阅读并同意用户协议和隐私条款</el-checkbox>
        <a @click="goRegister">没有账号?去注册</a>
      </el-form-item>
      <button @click.prevent="sendLogin">登录</button>
    </el-form>
  </div>
</template>
<script>
import { login } from "@/api/user.js";
export default {
  name: "myLogin",
  data(){
    return{
      loginRuleForm:{
        username:'admin',
        password:'12345678',
        isAgree:false
      },
      loginRules:{
        username: [
          { required: true, message: "请输入注册账号", trigger: "blur" },
          { min: 4, max: 8, message: "长度在 4 到 8 个字符", trigger: "blur" }
        ],
        password: [
          { required: true, message: "请输入密码", trigger: "blur" },
          { min: 8, max: 16, message: "长度在 8 到 16 个字符", trigger: "blur" }
        ],
        isAgree:[
          { 
            // 自定义校验规则
            // 验证通过callback
            // 验证失败callback(new Error('err'))
            validator:(rule,value,callback)=>{
              if(value){
                callback()
              }else {
                callback(new Error('请阅读后考虑是否勾选同意用户协议'))
              }
            },
             trigger: "change"
             },
        ]
      }
    }
  },
  methods:{
    goRegister(){
      this.$router.push('/register')
    },
    sendLogin(){
      this.$refs.loginForm.validate((valid, obj) => {
        if (valid) {
          // 发送请求
          this.login();
        }
      });
    },
    async login(){
      const params = {'username':this.loginRuleForm.username,'password':this.loginRuleForm.password}
      const res = await login(params)
      if(res.data.code == 200){
        localStorage.setItem('token',res.data.data.token) 
        // 存入本地
        localStorage.setItem('userInfo',JSON.stringify(res.data.data))
        this.$router.push('/home')
      }
    }
  },
}
</script>
  
  <!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="less" scoped>
.login-container{
  height: 100vh;
  background: linear-gradient(#152035, #233b59);
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 16px;
  color: #03e9f4;
  // 表单样式
   //form表单
   .loginForm {
    width: 400px;
    box-sizing: border-box;
    padding: 15px;
    // background: #152035;
    ::v-deep .el-input__inner {
      width: 100%;
      height: 40px;
      border: none;
      background: none;
      border-bottom: #03e9f4 1px solid;
      border-radius: 0%;
      color: white;
      font-size: 16px;
      margin-top: 10px;
      padding: 0%;
    }
    .el-form-item {
      margin-bottom: 7px;
    }
    a {
      font-size: 14px;
      cursor: pointer;
      margin-left: 22px;
    }
    ::v-deep .el-checkbox__label {
      margin-top: 10px;
    }
    ::v-deep .el-checkbox__label {
    padding-left: 3px;
    }
    ::v-deep .el-form-item__content {
    line-height: 0px; 
    
    }
    button {
      width: 100%;
      height: 40px;
      border: none;
      background: #03e9f4;
      outline: none;
      margin-top: 20px;
      margin-left: 2px;
      font-size: 18px;
      cursor: pointer;
    }
  }
}
</style>
